<!-- 填报记录 -->
<template>
	<view class="setting-container" :style="{ height: `${windowHeight}px` }">
		<!-- <u-sticky>
			<view class="search-box">
				<u-row gutter="10">
					<u-col span="9" @click="dateShow = true">
						<u--input v-model="queryParams.date"  
						placeholder="请选择日期" :readonly="true" :focus="true"
							border="surround" clearable></u--input>
					</u-col>
					<u-col span="3">
						<u-button text="搜索" type="primary" @click="searchInit"></u-button>
					</u-col>
				</u-row>
			</view>
		</u-sticky> -->
		<view class="menu-list">
			<block v-if="recoredData.length">
				<view class="module" v-for="item in recoredData" :key="item.id">
					<view class="row-module">
						<view v-if="item.landName" class="title">{{ item.landName }}</view>
						<view class="row-contentw">创建时间：<uni-dateformat :date="item.createTime"></uni-dateformat></view>
						<view v-if="item.phenologicalPeriod" class="row-content">物候期: {{ item.phenologicalPeriod }}</view>
						<view v-if="item.maxMinTemperature" class="row-content">日最高 最低温℃: {{ item.maxMinTemperature }}</view>
						<view v-if="item.rainfall" class="row-content">日降雨量及预报值mm: {{ item.rainfall }}</view>
						<view v-if="item.soilMoisture" class="row-content">土壤湿度%: {{ item.soilMoisture }}</view>
						<view v-if="item.soilN" class="row-content">土壤N含量(mg/kg): {{ item.soilN }}</view>
						<view v-if="item.soilP" class="row-content">土壤P含量(mg/kg): {{ item.soilP }}</view>
						<view v-if="item.soilK" class="row-content">土壤K含量(mg/kg): {{ item.soilK }}</view>
						<view v-if="item.irrigationHours" class="row-content">'灌水时数*10: {{ item.irrigationHours }}</view>
						<view v-if="item.rustLeafRate" class="row-content">锈病病叶率%: {{ item.rustLeafRate }}</view>
						<view v-if="item.virusPlantRate" class="row-content">病毒病株率%: {{ item.virusPlantRate }}</view>
						<view v-if="item.alternariaLeafSpot" class="row-content">斑点落叶病叶率%: {{ item.alternariaLeafSpot }}</view>
						<view v-if="item.scabLeafRate" class="row-content">黑星病叶率%: {{ item.scabLeafRate }}</view>
						<view v-if="item.aphidTipRate" class="row-content">蚜虫虫梢率%: {{ item.aphidTipRate }}</view>
						<view v-if="item.redSpiderLeafRate" class="row-content">红蜘蛛虫叶率%: {{ item.redSpiderLeafRate }}</view>
						<view v-if="item.insectLeafRate" class="row-content">虫叶率%: {{ item.insectLeafRate }}</view>
						<view v-if="item.insectFruitRate" class="row-content">虫果率%: {{ item.insectFruitRate }}</view>
						<view v-if="item.plantProtection" class="row-content">植保管理: {{ item.plantProtection }}</view>
						<view v-if="item.fertilization" class="row-content">施肥管理: {{ item.fertilization }}</view>
						<view v-if="item.medicationDay" class="row-content">打药日(标注70): {{ item.medicationDay }}</view>
						<view v-if="item.horizontalRadius" class="row-content">果实横径mm: {{ item.horizontalRadius }}</view>
						<view v-if="item.perInflorescenceFruits" class="row-contentw">每株花序果实数(个): {{ item.perInflorescenceFruits }}</view>
						<view v-if="item.perYield" class="row-contentw">每株产量(kg/株): {{ item.perYield }}</view>
					</view>

				</view>
				<u-loadmore :status="status" />
			</block>

			<block v-else>
				<u-empty mode="data" marginTop="120" line></u-empty>
			</block>
		</view>

		<!-- 日期 -->
		<u-datetime-picker :show="dateShow" v-model="dateForm" 
		mode="date" ref="datetimePicker" @confirm="dateConfirm" @cancel="dateCancel"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		orchardDataWrite
	} from '@/api/infoRecord'
	export default {
		data() {
			return {
				status: 'nomore',
				windowHeight: uni.getSystemInfoSync().windowHeight,
				recoredData: [],
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					landId: '',
					date: ''
				},
				total: 0,
				dateShow: false,
				dateForm: Number(new Date())
			};
		},
		created() {
			this.queryParams.landId = this.$store.getters.landData.id;
			this.init()
		},
		methods: {
			searchInit() {
				this.recoredData = [];
				this.init();
			},
			async init() {
				this.status = 'loading';
				let {
					data
				} = await orchardDataWrite(this.queryParams);
				this.recoredData = [...this.recoredData, ...data.list];
				this.status = 'nomore';
				this.total = data.total
			},
			onReachBottom() {
				if (this.recoredData.length < this.total) {
					this.queryParams.pageNo++;
					this.init();
				}
			},
			dateConfirm(data) {
				this.dateShow = false;
				this.queryParams.date = uni.$u.timeFormat(data.value, 'yyyy-mm-dd');
			},
			dateCancel() {
				this.dateShow = false;
				this.queryParams.date = ''
			}
		}
	};
</script>

<style lang="scss" scoped>
	.module {
		padding: 14px;
		box-shadow: 5px 5px 5px #888888;
		background: #ffffff;
		border-radius: 18rpx;
		margin-bottom: 22px;
	}

	.row-module {
		display: flex;
		flex-wrap: wrap;
	}

	.title {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 6px;
	}

	.row-content {
		width: 50%;
		margin-bottom: 6px;
		font-weight: 600;
		color: #4f4c4c;
	}

	.row-contentw {
		width: 100%;
		margin-bottom: 6px;
		font-weight: 600;
		color: #4f4c4c;
	}

	.search-box {
		background-color: #fff;
		height: 60px;
		padding: 10px 15px;
	}
</style>